import {
  Button,
  Col,
  Descriptions,
  Divider,
  Form,
  Input,
  message,
  Radio,
  Row,
  Spin,
  Table,
  Upload,
} from 'antd';
import { history } from 'umi';
import React, { useState } from 'react';
import request, { serverUrlRoot } from '../../../http';
import { askForLeave } from '@/pages/login/service';
interface Student {
  studentName: any;
  userNo: any;
  collegesName: any;
  majorName: any;
  gradeName: any;
  className: any;
  classTeacher: any;
  theme: any;
  startLeaveTime: any;
  endLeaveTime: any;
  leaveType: any;
  reason: any;
  status: any;
}

const { TextArea } = Input;

// import React from 'react'

// export default function absenceReason() {
//   return (
//     <div>

//     </div>
//   )
// }

export default function particulars(Props: any) {
  const [formObject] = Form.useForm(); //获取数据
  const [form] = Form.useForm(); //获取数据
  const columns = [
    {
      title: '操作人',
      dataIndex: 'classTeacher',
      key: 'classTeacher',
    },
    {
      title: '操作事项',
      dataIndex: 'status',
      key: 'status',
    },
    {
      title: '操作时间',
      dataIndex: 'operationTime',
      key: 'operationTime',
    },
    {
      title: '说明',
      dataIndex: 'reasonsFailure',
      key: 'reasonsFailure',
    },
  ];

  const [dataSource, setDataSource] = React.useState<any[]>(); //操作记录数据集合
  const [desData, setDesData] = useState<Student>({
    studentName: '',
    userNo: '',
    collegesName: '',
    majorName: '',
    gradeName: '',
    className: '',
    classTeacher: '',
    theme: '',
    startLeaveTime: '',
    endLeaveTime: '',
    leaveType: '',
    reason: '',
    status: '',
  });

  const GetData = async () => {
    await request
      .get(
        '/api/admin/adminLeavesController/getStudentLeaveInfo?leaveId=' +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        if (response.code == 200 && response.data != null) {
          setspinning(false);
          setDesData(response.data);
          formObject.setFieldsValue({
            ...response.data,
          });
        } else {
          message.error(
            '请假操作记录获取时发生/' + response.message + '/错误！！',
          );
        }
      });

    await request
      .get(
        '/api/admin/adminLeavesController/getStudentLeaveOperation?leaveId=' +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        if (response.code == 200 && response.data != null) {
          const data = response.data.map((item: any, index: number) => ({
            key: index,
            classTeacher: item.classTeacher,
            status:
              item.status == 0
                ? '审批'
                : item.status == 1
                ? '审批不通过'
                : '审批通过',
            operationTime: item.operationTime,
            reasonsFailure: item.reasonsFailure,
          }));
          setDataSource(data);
        } else {
          message.error(
            '请假操作记录获取时发生/' + response.message + '/错误！！',
          );
        }
      });
  };

  const GetFile = async () => {
    await request
      .get(
        '/api/admin/adminLeavesController/getStudentLeaveAttachement?leaveId=' +
          askForLeave.getAskForLeaveId().id,
      )
      .then((response: any) => {
        const data = response.data.map((item: any, index: number) => ({
          uid: index,
          name: item.fileName,
          status: 'done',
          response: 'jiu shi wan',
          url: serverUrlRoot + '/file/downloadFile/' + item.fileUrl.slice(30),
        }));
        setdefaultFileList(data);
      });
  };

  const [defaultFileList, setdefaultFileList] = useState();

  const props = {
    showUploadList: {
      showDownloadIcon: true,
      // downloadIcon: 'download ',
      showRemoveIcon: false,
    },
  };

  React.useEffect(() => {
    // Des();
    // GetLeave();
    GetFile();
    GetData().finally();
  }, []);
  const [spinning, setspinning] = useState(true);
  return (
    <Spin spinning={spinning} size="large">
      <Row justify="center" style={{ marginTop: 30 }}>
        <Col span={22}>
          <span style={{ color: 'red', fontSize: '25px', float: 'right' }}>
            {askForLeave.getAskForLeaveId().status}
          </span>
        </Col>
        <Col span={22}>
          <Descriptions
            layout="vertical"
            labelStyle={{
              fontSize: '13px',
              fontWeight: 'bold',
            }}
            contentStyle={{
              fontSize: '16px',
            }}
            column={4}
          >
            <Descriptions.Item label="姓名">
              {desData.studentName}
            </Descriptions.Item>
            <Descriptions.Item label="学号">{desData.userNo}</Descriptions.Item>
            <Descriptions.Item label="院系">
              {desData.collegesName}
            </Descriptions.Item>
            <Descriptions.Item label="专业">
              {desData.majorName}
            </Descriptions.Item>
            <Descriptions.Item label="年级">
              {desData.gradeName}
            </Descriptions.Item>
            <Descriptions.Item label="班级">
              {desData.className}
            </Descriptions.Item>
            <Descriptions.Item label="班主任">
              {desData.classTeacher}
            </Descriptions.Item>
          </Descriptions>
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Form
            name="editForm"
            form={formObject}
            preserve={false}
            layout="vertical"
          >
            <Row gutter={24} justify="center">
              <Col span={24} key="1">
                <Form.Item
                  label="主题"
                  name="theme"
                  style={{ marginBottom: 24 }}
                >
                  <Input disabled />
                </Form.Item>
              </Col>
              <Col span={24} key="2">
                <Row gutter={24}>
                  <Col span={8} key="3">
                    <Form.Item label="开始日期" name="startLeaveTime">
                      <Input disabled />
                    </Form.Item>
                  </Col>
                  <Col span={8} key="4">
                    <Form.Item
                      label="结束日期"
                      name="endLeaveTime"
                      style={{ marginBottom: 24 }}
                    >
                      <Input disabled />
                    </Form.Item>
                  </Col>
                </Row>
              </Col>
              <Col span={24} key="5">
                <Form.Item label="请假原因" name="leaveType">
                  <Radio.Group disabled>
                    <Radio value={0}>病假（需附医院证明）</Radio>
                    <Radio value={1}>事假</Radio>
                    <Radio value={2}>其它</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={24} key="6">
                <Form.Item
                  name="reason"
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: '请假原因不能为空!',
                    },
                    { max: 60, message: '最大长度不能超过60!' },
                  ]}
                  style={{ marginBottom: 24 }}
                >
                  <TextArea rows={4} style={{ marginTop: 10 }} disabled />
                </Form.Item>
              </Col>
              <Col span={24} key="7">
                <Col span={4}>
                  附件：
                  <Upload fileList={defaultFileList} {...props}></Upload>
                </Col>
              </Col>
            </Row>
          </Form>
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Divider orientation="left">操作记录</Divider>
          <Table columns={columns} dataSource={dataSource} pagination={false} />
        </Col>
        <Col span={22} style={{ marginTop: 40 }}>
          <Button
            onClick={() => {
              history.goBack();
            }}
            style={{ margin: 10 }}
          >
            返回
          </Button>
        </Col>
      </Row>
    </Spin>
  );
}
